<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!--
  Customize this policy to fit your own app's needs. For more guidance, see:
      https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
  Some notes:
      * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
      * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
      * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
          * Enable inline JS: add 'unsafe-inline' to default-src
  -->
  <meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="default">
  <meta name="theme-color" content="#2196f3">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=mgiNQ25duGhPsEQpCYUeG19MDkBSRoN9"></script>
  <style type="text/css">
    body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";font-size:14px;}
    #l-map{height:300px;width:100%;}
  </style>
  <script>
    window.locationAdr = {
      lng :87.56498774,
      lat :43.84038035,
      city:"乌鲁木齐"
    }
    window.markerLongitude=87.56498774;
    window.markerLatitude=43.84038035;

    window.mapUrl='http://api.map.baidu.com/staticimage/v2?ak=mgiNQ25duGhPsEQpCYUeG19MDkBSRoN9&center='+window.markerLongitude+','+window.markerLatitude+'&zoom='+15+'&markers='+window.markerLongitude+','+window.markerLatitude;


  </script>
  <title>优码客FM</title>

  <link rel="stylesheet" href="framework7/css/framework7.min.css">
  <link rel="stylesheet" href="css/icons.css">
  <link rel="stylesheet" href="css/app.css">
</head>
<body>
  <div id="app">
    <div class="statusbar"></div>

    <div class="views tabs ios-edges">
      <!-- Your main view/tab, should have "view-main" class. It also has "tab-active" class -->
      <div id="view-home" class="view view-main tab tab-active">
        <!-- Page, data-name contains page name which can be used in page callbacks -->
        <div class="page" data-name="home">
          <!-- Top Navbar -->
          <div class="navbar">
            <div class="navbar-inner" style="background-color: #3ec889" >
              <div class="left">
              </div>
              <div class="title" style="color:white;text-align: center;">发布求助</div>
              <div class="right">
              </div>
            </div>
          </div>


          <!-- Scrollable page content-->
          <form class="page-content" id="my-form">
            <div class="list inline-labels no-hairlines-md " style="margin: 0px">
              <ul class="swipeout">

                <div class="item-content item-input popup-open" >
                  <div class="item-inner" >
                    <div class="item-title item-label"  style="width:25%;
                      color:#3ec889;text-align: center;line-height:41px">求助电台:</div>
                    <div class="item-input-wrap popup-open" data-popup="#my-popup" >
                      <p>
                        <a href="#"   id="rsName"
                           value="" style="color: #1b1b1b;"></a>
                      </p>
                    </div>
                    <img src='./img/seekhelp.png' style="width: 21px;height: 10px;" class="popup-open"
                         data-popup="#my-popup"/>

                  </div>
                </div>

                <div class="item-content item-input ac-1" style="height: 40px">
                  <div class="item-inner" >
                    <div class="item-title item-label" style="width:25%; color: #3ec889 ;line-height:20px;
                      text-align: center;">求助类型:
                    </div>
                    <div class="item-input-wrap "  >
                      <p><a href="#"  class="ac-1" id="seekType" style="color: #1b1b1b">寻人</a></p>
                    </div>
                    <img src='./img/seekhelp.png' style="width: 21px;height: 10px;"  class="ac-1 "/>

                  </div>
                </div>
                <div class="item-content item-input">
                  <div class="item-inner">
                    <div class="item-title item-label" style="width:25%; text-align: center;color: #3ec889">求 &nbsp助&nbsp 人:
                    </div>
                    <div class="item-input-wrap">
                      <input type="text"  name="seekerName" placeholder="">
                      <span class="input-clear-button"></span>
                    </div>
                  </div>
                </div>
                <div class="item-content item-input">
                  <div class="item-inner">
                    <div class="item-title item-label" style="width:25%; text-align: center;color: #3ec889">求助标题:</div>
                    <div class="item-input-wrap">
                      <input type="text" name="seekTitle" placeholder="">
                      <span class="input-clear-button"></span>
                    </div>
                  </div>
                </div>
                <div class="item-content item-input">
                  <div class="item-inner">
                    <div class="item-title item-label" style="width:25%; text-align: center;color: #3ec889">求助描述:</div>
                    <div class="item-input-wrap">
                      <!--<button id="record_audio">录音频</button>-->
                      <!--<button id="stop_audio">stop</button>-->
                      <!--<audio controls="controls" id="record_play"></audio>-->
                      <textarea  name="seekDes" placeholder=""></textarea>
                    </div>
                  </div>
                </div>
                <div class="item-content item-input">
                  <div class="item-inner">
                    <div class="item-title item-label" style="width:25%; text-align: center;color: #3ec889">走失位置:</div>
                    <div class="item-input-wrap">
                      <a href="/baiduMap/" id="view-map">选择位置</a>
                      <span class="input-clear-button"></span>
                    </div>
                  </div>
                </div>
                <div class="item-content item-input" style="margin-top: 10px">
                  <a href="/baiduMap/" >
                    <img id="map-ImageUrl"  class="map-ImageUrl"
                         src="http://api.map.baidu.com/staticimage?width=400&height=250&zoom=15¢er=北京市朝阳区广渠路3号竞园艺术区​\"/>
                  </a>
                </div>
                <div class="item-content item-input row">
                  <div class="item-inner" >
                    <div class="item-title item-label" style="width:25%; text-align: center;color: #3ec889">人物近照:</div>
                    <div class="item-input-wrap" id="container" style="display:inline-block;">
                      <div id="myp"  style="display:inline-block;padding-right: 5px" >
                      </div>
                      <img src="./img/add.png" height="50px" width="50px" style="margin-top: 15px;"
                           class="selectfile"
                           id="selectfile"/>
                    </div>
                  </div>
                </div>
                <div class="item-content item-input">
                  <div class="item-inner">
                    <div class="item-title item-label" style="width:25%; text-align: center;color: #3ec889">联 &nbsp系 &nbsp人:</div>
                    <div class="item-input-wrap">
                      <input type="text" name="contacts" placeholder="">
                      <span class="input-clear-button"></span>
                    </div>
                  </div>
                </div>
                <div class="item-content item-input">
                  <div class="item-inner">
                    <div class="item-title item-label" style="width:25%; text-align: center;color: #3ec889">联系电话:</div>
                    <div class="item-input-wrap">
                      <input type="tel" name="contactsTell" placeholder="">
                      <span class="input-clear-button"></span>
                    </div>
                  </div>
                </div>
              </ul>

            </div>

            <div class="block block-strong" style="margin: 0px">
              <div class="col" style="margin-top: 10px">
                <div id="tips" style="margin-left: 5px;margin-right: 5px;color: red;text-align:center;">

                </div>
                <a style="background-color: #3ec889; color: #ffffff ;margin-top: 10px;"
                   class="button convert-form-to-data button-big button-round button-raised color-green" href="#">
                  发布求助信息</a>
                <div style="margin-top: 20px;margin-left: 5px;margin-right: 5px">
                  发送后电台即可收到求助信息进行广播，只有主持人一键推送后才会在APP中显示
                </div>
              </div>
            </div>

            <div class="block block-strong upload-app"
                 style="text-align: center;margin: 10px;background-color: #2699c8;border-radius: 10px" >
              <a style=" display:block;color: #ffffff; "  id="upload" class="upload"
                 href="javascript:testApp()">
                下载优码客FM客户端</a>
            </div>
          </form>
        </div>
      </div>


    </div>


    <div class="popup" id="my-popup">
      <div class="view view-main view-init">
        <div class="page">
          <div class="navbar" >
            <div class="navbar-inner" style="background-color: #3ec889;color: #ffffff">
              <div class="title">选择求助电台</div>
              <div class="right">
                <a href="#" class="link popup-close" id="popup-close" style="color: #ffffff">关闭</a>
              </div>
            </div>
          </div>
          <div class="page-content infinite-scroll-content" style="padding-top: 20px">
            <div class="list simple-list">
              <ul id="UlLi">
              </ul>
            </div>
            <div class="preloader infinite-scroll-preloader"></div>
          </div>
        </div>
      </div>
    </div>

  </div>
  <!-- Cordova -->
  <!--
  <script src="cordova.js"></script>
  -->
  <script src="jquery/jquery-3.1.1.min.js"></script>
  <script src="jquery/jquery.jsonp-2.4.0.min.js"></script>

  <!-- Framework7 library -->
  <script src="framework7/js/framework7.min.js"></script>

  <!-- App routes -->
  <script src="js/routes.js"></script>

  <!-- Your custom app scripts -->
  <script src="js/app.js"></script>

  <script>
    var theme = 'ios';
    var plugin = {
      params: {
        theme: theme,
        root: '#app',
      }
    };
    if (Framework7.use) Framework7.use(plugin);
    else if (Framework7.Class && Framework7.Class.use) Framework7.Class.use(plugin);

  </script>

  <!-- Your custom app scripts -->
  <script type="text/javascript" src="lib/crypto1/crypto/crypto.js"></script>
  <script type="text/javascript" src="lib/crypto1/hmac/hmac.js"></script>
  <script type="text/javascript" src="lib/crypto1/sha1/sha1.js"></script>
  <script type="text/javascript" src="lib/base64.js"></script>
  <script type="text/javascript" src="lib/plupload-2.1.2/js/plupload.full.min.js"></script>
  <script src="js/upload.js"></script>

  <script type="text/javascript" src="js/baiduMap.js"></script>
<script>
  var $$ = Dom7;
  window.onload= function () {
    $.ajax({
      url: API_GET_ADR,
      type: 'get',
      dataType: 'jsonp',  // 请求方式为jsonp
      jsonpCallback: "IPMarker",    // 自定义回调函数名
    });
  }

  function IPMarker(res) {
    if (res.status ===0) {
      var addstr = res.address.split('|');
      var city = addstr[2]
      window.locationAdr = {
        lng :res.content.point.x,
        lat :res.content.point.y,
        city:city
      }

//      map_root.emit("mapList.marker",re,false);
      window.markerLongitude=res.content.point.x;
      window.markerLatitude=res.content.point.y;

      var url = MAP_IMAGE_URL+window.markerLongitude+','+window.markerLatitude+'&zoom='+15+'&markers='+window.markerLongitude+','+window.markerLatitude;
      window.mapUrl=url

      $$('#map-ImageUrl').attr('src', url);
    }
  }


</script>
</body>
</html>
